<template>
  <div class="component-library">
    <!-- 顶层 Tabs -->
    <el-tabs v-model="activeTab" class="top-level-tabs">
      <el-tab-pane label="组件" name="components">
        <div class="panel-content component-panel">
          <!-- 调试信息 -->
          <div class="debug-info">
            组件分类数量: {{ props.componentCategories.length }}
          </div>
          
          <div class="category-list" @mouseleave="handleCategoryLeave">
            <div
              v-for="category in props.componentCategories"
              :key="category.type"
              class="category-item"
              :class="{ active: activeCategory?.type === category.type }"
              @mouseenter="handleCategoryEnter(category, $event)"
            >
              <el-icon class="category-icon"><component :is="category.icon || 'Grid'" /></el-icon>
              <span class="category-name">{{ category.name }}</span>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="图层" name="layers">
        <div class="panel-content layer-panel">
          <div class="layer-list">
            <div v-if="layers.length === 0" class="empty-layers">
              <el-icon><CopyDocument /></el-icon>
              <span>暂无图层</span>
            </div>
            <div v-for="layer in layers" :key="layer.id" class="layer-item">
              <el-icon><component :is="layer.icon || 'Grid'" /></el-icon>
              <span class="layer-name">{{ layer.name }}</span>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 飞出式子菜单 -->
    <div
      v-if="showSubmenu && activeCategory"
      class="submenu-panel"
      :style="submenuStyle"
      @mouseenter="handleSubmenuEnter"
      @mouseleave="handleSubmenuLeave"
    >
      <div class="submenu-header">{{ activeCategory.name }}</div>
      <div class="submenu-search">
         <el-input v-model="searchText" placeholder="搜索组件..." clearable size="small">
          <template #prefix><el-icon><Search /></el-icon></template>
        </el-input>
      </div>
      <div class="submenu-grid">
        <template v-for="item in filteredSubComponents" :key="item.type">
          <div
            class="submenu-item"
            @mousedown="$emit('component-mousedown', item, $event)"
          >
            <div class="item-preview">
              <el-icon><component :is="item.icon || activeCategory.icon || 'Grid'" /></el-icon>
            </div>
            <div class="item-name">{{ item.name }}</div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, defineProps, defineEmits } from 'vue'
import { 
  Search, 
  Menu, 
  Grid, 
  SuitcaseLine, 
  CopyDocument,
  Document,
  Picture,
  Monitor,
  DataLine,
  Histogram,
  PieChart,
  Position,
  Odometer,
  Loading,
  Timer,
  VideoPlay,
  List,
  Location,
  PictureRounded,
  Edit
} from '@element-plus/icons-vue'

const props = defineProps({
  componentCategories: { type: Array, required: true },
  layers: { type: Array, default: () => [] }
})

defineEmits(['component-mousedown'])

const activeTab = ref('components')
const searchText = ref('')

const activeCategory = ref(null)
const showSubmenu = ref(false)
const submenuStyle = ref({})
let hideTimeout = null

// 过滤飞出菜单中的组件
const filteredSubComponents = computed(() => {
  if (!activeCategory.value || !activeCategory.value.components) return []
  
  // 收集所有组件（包括子类型）
  const allComponents = []
  activeCategory.value.components.forEach(component => {
    if (component.subTypes && component.subTypes.length > 0) {
      // 如果有子类型，添加所有子类型
      allComponents.push(...component.subTypes)
    } else {
      // 如果没有子类型，直接添加组件本身
      allComponents.push(component)
    }
  })

  if (!searchText.value) {
    return allComponents
  }
  
  const lowerCaseSearch = searchText.value.toLowerCase()
  return allComponents.filter(
    item => item.name.toLowerCase().includes(lowerCaseSearch)
  )
})

const handleCategoryEnter = (category, event) => {
  if (hideTimeout) clearTimeout(hideTimeout)
  searchText.value = '' // 切换分类时清空搜索
  activeCategory.value = category
  showSubmenu.value = true
  
  const rect = event.currentTarget.getBoundingClientRect()
  submenuStyle.value = {
    top: `${rect.top}px`,
    left: `${rect.right}px`
  }
}

const handleCategoryLeave = () => {
  hideTimeout = setTimeout(() => {
    if (showSubmenu.value) {
      showSubmenu.value = false
      activeCategory.value = null
    }
  }, 200)
}

const handleSubmenuEnter = () => {
  if (hideTimeout) clearTimeout(hideTimeout)
}

const handleSubmenuLeave = () => {
  if (hideTimeout) clearTimeout(hideTimeout)
  showSubmenu.value = false
  activeCategory.value = null
}
</script>

<style scoped>
.component-library {
  width: 240px;
  height: 100%;
  background-color: #202124;
  border-right: 1px solid #3a3b3d;
  display: flex;
  flex-direction: column;
}

/* 顶部 Tabs */
.top-level-tabs {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
:deep(.el-tabs__header) {
  margin: 0;
  flex-shrink: 0; /* 防止 header 被压缩 */
}
:deep(.el-tabs__nav-wrap) {
  padding: 0 16px;
}
:deep(.el-tabs__nav-wrap::after) {
  background-color: #3a3b3d;
}
:deep(.el-tabs__item) {
  color: #a9a9a9;
  font-size: 14px;
}
:deep(.el-tabs__item.is-active) {
  color: #fff;
}
:deep(.el-tabs__active-bar) {
  background-color: #409eff;
}

:deep(.el-tabs__content) {
  flex: 1;
  overflow-y: auto;
}

.panel-content {
  padding: 12px;
}
.debug-info {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
  padding: 4px 8px;
  background-color: #2d2f34;
  border-radius: 4px;
}
.category-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background-color: #2d2f34; /* 临时背景色 */
  background-image: url('');
  background-repeat: repeat;
  padding: 8px;
  border-radius: 6px;
  min-height: 200px; /* 确保有最小高度 */
}
.category-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
  color: #a9a9a9;
}
.category-item:hover, .category-item.active {
  background-color: #2d2f34;
  color: #fff;
}
.category-icon { font-size: 18px; }
.category-name { font-size: 14px; }

/* 图层面板 */
.layer-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.layer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  color: #a9a9a9;
}
.empty-layers {
  text-align: center;
  color: #666;
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.empty-layers .el-icon {
  font-size: 24px;
}


/* 飞出式菜单 */
.submenu-panel {
  position: fixed;
  z-index: 1001;
  width: 280px;
  background-color: #2d2f34;
  border: 1px solid #3a3b3d;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  padding: 12px;
  display: flex;
  flex-direction: column;
}
.submenu-header {
  font-size: 14px;
  font-weight: 600;
  color: #e5e5e5;
  margin-bottom: 12px;
}
.submenu-search {
  margin-bottom: 12px;
}
.submenu-search :deep(.el-input__wrapper) {
  background-color: #202124 !important;
}
.submenu-grid {
  flex: 1;
  overflow-y: auto;
  max-height: 60vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-right: 4px;
}
.submenu-item {
  background-color: #202124;
  border: 1px solid #3a3b3d;
  border-radius: 6px;
  padding: 12px 8px;
  text-align: center;
  cursor: grab;
  transition: all 0.2s ease;
}
.submenu-item:hover {
  background-color: #3c3e42;
  border-color: #409eff;
  transform: translateY(-2px);
}
.item-preview .el-icon {
  font-size: 24px;
  color: #a9a9a9;
  margin-bottom: 8px;
}
.submenu-item:hover .item-preview .el-icon {
  color: #409eff;
}
.item-name {
  font-size: 12px;
  color: #e5e5e5;
}

/* 滚动条 */
.panels-container::-webkit-scrollbar,
.submenu-grid::-webkit-scrollbar {
  width: 6px;
}
:deep(.el-tabs__content)::-webkit-scrollbar {
  width: 6px;
}
.panels-container::-webkit-scrollbar-thumb,
.submenu-grid::-webkit-scrollbar-thumb {
  background: #3a3b3d;
  border-radius: 3px;
}
:deep(.el-tabs__content)::-webkit-scrollbar-thumb {
  background: #3a3b3d;
  border-radius: 3px;
}
.panels-container::-webkit-scrollbar-track,
.submenu-grid::-webkit-scrollbar-track {
  background: transparent;
}
:deep(.el-tabs__content)::-webkit-scrollbar-track {
  background: transparent;
}
</style> 